<template>
  <div>
    <el-container>
      <el-header>
        <div>
          <top></top>
        </div>
      </el-header>
      <el-main style="position: absolute;top: 150px">
        <div style="width: 1226px;height: 460px;margin: 0 auto">
          <div id="car3">
            <ul class="tx" @mouseover="mouseOver" @mouseleave="mouseLeave">
              <li @click="show = !show">电脑配件<i class="el-icon-d-arrow-right"></i></li>
              <li @click="show = !show">电脑整机<i class="el-icon-d-arrow-right"></i></li>
              <li @click="show = !show">外接产品<i class="el-icon-d-arrow-right"></i></li>
              <li @click="show = !show">游戏设备<i class="el-icon-d-arrow-right"></i></li>
              <li @click="show = !show">游戏设备<i class="el-icon-d-arrow-right"></i></li>
              <li @click="show = !show">游戏设备<i class="el-icon-d-arrow-right"></i></li>
              <li @click="show = !show">游戏设备<i class="el-icon-d-arrow-right"></i></li>
            </ul>
          </div>
          <div>
            <el-col :span="18">
              <el-carousel height="460px">
                <el-carousel-item v-for="urls in url" :key="urls" style="z-index: 1">
                  <img  :src="urls" width="992px" height="100%" alt="">

                </el-carousel-item>
              </el-carousel>
            </el-col>
            <div style="position: absolute;top: 20px;right: 90px;float:right;z-index: 2">
              <transition name="el-fade-in-linear">
                <div v-show="show" id="box" class="transition-box" @mouseover="mouseOver" @mouseleave="mouseLeave">
                  <ul class="tx2">
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                    <a href=""><li><img src="../img/a.jpg" />iphone14promax</li></a>
                  </ul>
                </div>
              </transition>
            </div>
          </div>
        </div>
        <!--商品列表-->
        <div style="width: 1226px;padding: 0;margin: 20px auto;">
          <!--列表顶部|采用面包屑-->
          <div>
            <el-breadcrumb separator-class="null" style="padding: 50px 0 0 0">
              <el-breadcrumb-item :to="{ path: '/' }" style="font-size: 25px">电脑</el-breadcrumb-item>
              <el-breadcrumb-item style="float: right;margin: 10px 53px 0 0;"><a href="/" style="cursor: pointer">查看更多</a>
                <i class="el-icon-arrow-right"></i>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div>

            <!--列表展示开始|采用卡片-->
            <el-row :gutter="15">

              <el-col
                  style="width: 296px; margin: 5px auto; float: left;">
                <el-card class="image" :body-style="{ padding: '0px',height : '640px'}">
                  <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9895c56a7b792fb9053e3085fc261072.jpg?thumb=1&w=234&h=614&f=webp&q=90">
                </el-card>
              </el-col>

              <el-col :span="6" v-for="(o, index) in 6"
                      style="width: 296px; height: 320px; margin: 5px auto; float: left">
                <a style="text-decoration: none" href="">
                  <el-card class="image_little" :body-style="{ padding: '0px'}">
                    <div style="padding: 5px;">
                      <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012022_19bbddb6b35c3828f8b53f450c1519a3.png?thumb=1&w=200&h=200&f=webp&q=90"><br>
                      <span style="font-size: 11px"> Redmi Book Pro 15 2022</span><br>
                      <span style="font-size: 10px;color:darkgrey;">| Note 11 5G | Note 9 4G</span><br>
                      <span style="font-size:9px;color: orange;font-weight: bold;position: relative;top: 20px">7999元起</span>
                    </div>
                  </el-card>
                </a>
              </el-col>
            </el-row>
            <!--列表展示结束-->
          </div>
        </div>
        <!--商品列表结束-->
        <!--商品列表-->
        <div style="width: 1226px;padding: 0;margin: 20px auto;">
          <!--列表顶部|采用面包屑-->
          <div>
            <el-breadcrumb separator-class="null" style="padding: 50px 0 0 0">
              <el-breadcrumb-item :to="{ path: '/' }" style="font-size: 25px">电脑</el-breadcrumb-item>
              <el-breadcrumb-item style="float: right;margin: 10px 53px 0 0;"><a href="/" style="cursor: pointer">查看更多</a>
                <i class="el-icon-arrow-right"></i>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div>
            <!--列表展示开始|采用卡片-->
            <el-row :gutter="15">

              <el-col
                  style="width: 296px; margin: 5px auto; float: left;">
                <el-card class="image" :body-style="{ padding: '0px',height : '640px'}">
                  <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/06d75467973ea188caa56e18a67647b4.png?thumb=1&w=234&h=614&f=webp&q=90">
                </el-card>
              </el-col>

              <el-col :span="6" v-for="(o, index) in 6"
                      style="width: 296px; height: 320px; margin: 5px auto; float: left">
                <a style="text-decoration: none" href="">
                  <el-card class="image_little" :body-style="{ padding: '0px'}">
                    <div style="padding: 5px;">
                      <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012022_19bbddb6b35c3828f8b53f450c1519a3.png?thumb=1&w=200&h=200&f=webp&q=90"><br>
                      <span style="font-size: 11px"> Redmi Book Pro 15 2022</span><br>
                      <span style="font-size: 10px;color:darkgrey;">| Note 11 5G | Note 9 4G</span><br>
                      <span style="font-size:9px;color: orange;font-weight: bold;position: relative;top: 20px">7999元起</span>
                    </div>
                  </el-card>
                </a>
              </el-col>
            </el-row>
            <!--列表展示结束-->
          </div>
        </div>
        <!--商品列表结束-->
      </el-main>
      <foot style="position: absolute;top: 2200px"></foot>
    </el-container>
  </div>
</template>


<script>
import top from "@/page/top";
import foot from "@/page/foot";
export default {
  name: "index",
  components: {
    top,foot
  },
  data: () => ({
    show: false,
    url:["https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi12sltli3b/1612.png",
      "https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomicivi1sokm6kd/5075.jpg",
      "https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11youth/section1.jpg",
      "https://cdn.cnbj1.fds.api.mi-img.com/product-images/redminote11tpro6prgxe/div2add.png"]
  }),
  methods:{
    mouseOver(){
      this.show = true;
    },
    mouseLeave(){
      this.show = false;
    }
  }
}
</script>

<style>
.tx2 li img{
  position: absolute;
  margin: 14px 0 0 -40px;
}
.tx2 li{
  margin-left: 10px;
  padding: 7px 20px;
  float: left;
  width: 172px;
  line-height: 60px;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #2c3e50;
  text-decoration: none;
}

.tx2 li:hover{
  color: orange;
}

.tx2{
  padding: 0;
  margin: 0;
}

#box:hover{
  show : true;
}

#box {
  width: 922px;
  height: 460px;
  border-radius: 4px;
  background-color: #fff;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  border: 1px solid #d3dce6;
}

.tx a{
  margin-left: 20px;
  text-decoration: none;
  color: white;
  font-weight: bold;
}

.el-icon-d-arrow-right{
  float: right;
  margin: 13px 35px 0 0 ;
  color: #fff;
}

.tx li:hover{
  background-color: orange;
}

.tx{
  list-style-type: none;
}

.tx li{
  font-weight: bold;
  width: 234px;
  text-align: left;
  padding: 9px;
  line-height: 43px;
  font-size: 18px;
  color: #fff;
  margin-left: -40px;
}

#car3{
  width: 234px;
  height: 460px;
  background-color: darkgrey;
  float: left;
}

/*卡片标签*/
.image:hover {
  position: relative;
  top: 5px;
  box-shadow: 1px 1px 15px 10px #11333333;
}

.image_little{
  width: 270px;
  height: 310px;
}

.image_little:hover {
  position: relative;
  top: 5px;
  box-shadow: 1px 1px 15px 10px #11333333;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

/*卡片标签*/
</style>
